<template>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home/users' }">用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片视图 -->
  <el-card>

    <!-- 栅格布局--带按钮的input框，新增按钮 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="input3" style="max-width: 600px" placeholder="Please input" class="input-with-select">
          <template #append>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addUserBtn">新增用户</el-button>
      </el-col>
    </el-row>

    <!-- 表格组件
      data属性就是表格数据源
      prop属性是数组元素中对应的属性名 
      label属性是当前列的标题
    -->
    <el-table :data="usersList" style="width: 100%">
      <!-- 展开行 -->
      <el-table-column type="expand">
        <!-- props这是一个自定义变量名，它是作用域插槽获取到的值,props其实就是 usersList的值-->
        <template #default="scope">
          <div>
            <!-- props.row是当前行那一个对象值 -->
            {{ scope.row }}
          </div>
        </template>
      </el-table-column>

      <!-- 索引列 -->
      <el-table-column type="index" width="50" />

      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="username" label="用户名" width="180" />
      <el-table-column prop="role_name" label="角色名" />
      <el-table-column prop="mobile" label="手机号" />

      <el-table-column prop="mg_state" label="可用状态">
        <!-- 这里写作用域插槽，使用el-switch实现开关布局 -->
      </el-table-column>

      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            Edit
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            Delete
          </el-button>

          <el-button type="danger" circle>
            <el-icon>
              <Delete />
            </el-icon>
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件
       current-page 代表当前页
       page-size  每页数据条数
       page-sizes 数组，代表每页数据条数的可选值
       layout : total总数据条数 sizes每页数据条数可选值下拉菜单 prev上一页按钮 pager页码数字 next下一页按钮 jumper跳转页码输入框
       total   总数据条数
       size-change   当每页的尺寸发生变化时触发的事件
       current-change  当页码发生变化时触发的事件
    -->
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2, 5, 10, 15]"
      layout="total, sizes, prev, pager, next, jumper" :total="totalNum" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </el-card>

  <!-- 新增用户对话框 -->
  <el-dialog v-model="addUserDialogVisible" :modal="false">
    <template #header>
      <h2>新增用户</h2>
    </template>
    
    <!-- el-form 实现 -->
    

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleAddUserBtn">确定</el-button>
        <el-button type="primary" @click="addUserDialogVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { getUsersList } from '../api/UsersApi'
import type { Ref } from 'vue'

// 定义usersList的数组元素类型
interface usersItem {
  create_time: number
  email: string
  id: number
  mg_state: boolean
  mobile: string | number
  role_name: string
  username: string
}

// 新增用户对话框的可见性
const addUserDialogVisible = ref(false)

// 新增用户按钮的事件处理函数
const addUserBtn = ()=>{
  addUserDialogVisible.value = true
}

// 对话框中确定新增用户按钮
const handleAddUserBtn=()=>{
  // 获取整个新增用户的form，对里面的所有值进行校验，如果校验通过，就发起“添加用户”的http请求，如果新增成功，需要刷新当前usersList，并且关闭当前对话框

  addUserDialogVisible.value = false
}

// 当前用户的个数
const totalNum = ref(0)

// 搜索关键字
const input3 = ref('')

// 分页页码数
const currentPage4 = ref(1)

// 每一页的数据个数
const pageSize4 = ref(5)

// 当每页的尺寸发生变化时触发
const handleSizeChange = () => {
  // 重新调用usersListInit对表格的数据源usersList进行赋值
  usersListInit()
}

// 当页码发生变化时触发
const handleCurrentChange = () => {
  // 重新调用usersListInit对表格的数据源usersList进行赋值
  usersListInit()
}

// 表格当前行修改事件
const handleEdit = (currentUser: usersItem) => {
  console.log(currentUser)
}
// 表格当前行删除事件
const handleDelete = (currentUser: usersItem) => {
  console.log(currentUser)
}


// 表格数据
const usersList: Ref<usersItem[]> = ref([])

// 获取所有用户数据
const usersListInit = () => {
  getUsersList({
    query: input3.value,
    pagenum: currentPage4.value,
    pagesize: pageSize4.value
  }).then(res => {
    console.log(res.data.data)
    usersList.value = res.data.data.users
    // 修改total的个数
    totalNum.value = res.data.data.total
  })
}

// 挂载组件的生命周期
onMounted(() => {
  usersListInit()
})

</script>

<style>
.el-card {
  margin-top: 20px;
}

.el-table {
  margin: 20px 0;
}
</style>